<template>
  <div>
    御剑乘风来,除魔天地间!
    <ul>
      <li @click="handle1">这是第1个li ====first</li>
      <li @click="handle2">这是第2个li ====second</li>
      <li @click="handle3">这是第3个li ====third</li>
    </ul>

    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {

    }
  },
  watch: {
    '$route.path' (newVal) {
      console.log(newVal, 999);
      if (newVal == '/second') {
        // alert(111)
      }
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    handle1 () {
      /*
      routes:[]===路由匹配规则
      $route====路由参数对象
      $router===路由跳转对象
      */

      console.log(this, 111);
      // this.$router.push('/?id=1')
      this.$router.push({ path: '/', query: { id: 1 } }).catch(err => { })
    },
    handle2 () {
      this.$router.push('/second?id=2&name=jack').catch(err => { })
    },
    handle3 () {
      // this.$router.push('/third/3/rose').catch(err => { })
      if (this.$route.fullPath == '/third/3/rose') return
      this.$router.push('/third/3/rose?q=33333')
      // this.$router.go(-1)
      // this.$router.back()
    }
  }
}
</script>
<style lang='less'  scoped>
ul {
  width: 1000px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  li {
    margin: 20px;
    cursor: pointer;
  }
}
</style>